<template>
    <div
        class="DataBlock"
        :style="{
            transform: `translate(${item.x}px,${item.y}px)`,
            zIndex: item.id == HoverId ? 100 : 1,
        }"
        @mouseenter="emit('SetHoverId', item.id)"
        @mousedown.stop
    >
        <span class="Title" @mousedown.stop="Move">CodeBlock</span>
        <span> function ( </span>
        <template v-for="(Arg, index) in item.Args">
            <a-input size="small" v-model:value="item.Args[index]" style="width: 100px">
                <!-- <template #addonBefore>
                    <AimOutlined />
                </template> -->
                <template #addonAfter>
                    <delete-outlined @mousedown.stop="deleteArgs(index)" />
                </template>
            </a-input>
            <span>, </span>
        </template>
        <span> ) </span>
        <a-button size="small" @mousedown.stop="addArgs">
            <template #icon><PlusCircleOutlined /></template>
        </a-button>
        <span> { </span>
        <div style="padding: 8px 0 8px 16px">
            <a-textarea v-model:value="item.Code" :autoSize="{ minRows: 5 }" size="small" style="width: 400px"> </a-textarea>
        </div>
        <span>}; </span>
        <a-button size="small" @mousedown.stop>
            <template #icon><AimOutlined /></template>
            返回值
        </a-button>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { MoveStart } from "./MoveEvent";
import { AimOutlined, PlusCircleOutlined, DeleteOutlined } from "@ant-design/icons-vue";

const props = defineProps(["scale", "item", "HoveId", "HoverId", "MoveEvent"]);
const emit = defineEmits(["SetHoverId"]);

let lengthCache = props.item.Args.length;

function CacheLength() {
    if (props.item.Args.includes("Arg" + lengthCache)) {
        lengthCache++;
        CacheLength();
    }
}
CacheLength();

const addArgs = function () {
    CacheLength();
    props.item.Args.push("Arg" + lengthCache++);
};

const deleteArgs = function (index) {
    props.item.Args.splice(index, 1);
};
const MoveEnd = (x, y) => {
    props.item.x = x;
    props.item.y = y;
};

function Move(event) {
    MoveStart(event, props.item, props.scale, MoveEnd, MoveEnd);
}
</script>
<style lang="less" scoped>
.DataBlock {
    padding: 8px;
    position: absolute;
    background-color: rgb(196, 224, 255);
    border-radius: 5px;
    transform: translate(1200px, 700px);
    border: 1px solid rgba(1, 1, 1, 0.3);
    box-shadow: 3px 3px 5px rgba(1, 1, 1, 0.2);
    user-select: none;
}
.Type {
    cursor: pointer;
    padding: 0 3px;
    border-radius: 3px;
    &:hover {
        background-color: rgba(1, 1, 1, 0.2);
    }
}
.Title {
    cursor: move;
    padding: 3px 8px 3px 3px;
    border-radius: 3px;
    margin-right: 8px;
    color: #fff;
    background-color: rgba(13, 114, 80, 0.7);
    &:hover {
        background-color: rgba(1, 1, 1, 0.2);
    }
}
</style>
